<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义属性</title>
		<style>
			/*div宽高一致 300PX*px,圆，文本放大：10em,垂直居中
			每个圆添加一个颜色
			*/
		   span{
			   width: 300px;
			   height: 300px;
			   border-radius: 50%;
			   font-size: 10em;
			   text-align: center;
			   line-height: 300px;
			   background-color: #fff;
			   /*网页阴影：滤镜：下阴影2.文本阴影3.盒子阴影*/
			   /*属性值：x  y 模糊半径 阴影半径 颜色 内外阴影 inset*/
			   box-shadow: 5px 5px 50px 50px #77ffb4 inset;
			   /*浮动定位：float属性：none/left right*/
			   float: left;
			   /*clear清除浮动：left/right/both;直接作用在浮动的元素上*/
		   }
		   span.d1{
			  background-color: #ffaa00;
		   }
		   span.d2{
			   background-color: #ff557f;
		   }
		   span.d3{
			   background-color: aqua;
		   }
		   span.d4{
			   background-color: bisque;
		   }
		   span.d5{
			   background-color: blue;
		   }
		</style>
	</head>
	<body>
		<!-- 什么是定位？ 页面元素通过‘定位方式’指定具体位置 
		定位方式有5种：1.普通流定位/文档流定位：页面元素分为：块，行，行内元素
		              2.浮动定位：页面上的左右布局,可以让元素飘起来，飘起来元素转块
					  3.相对定位:相对于父级元素进行定位，没有父级，按照body定位
					  元素不脱离文档流
					  4.绝对定位：相对于父级元素进行定位，没有父级，按照页面左顶角定位
					  元素脱离文档流
					  堆叠属性z-index属性：属性值  9999
					  5.固定定位：广告接口固定在页面右下角，position:fiexd
		-->
	    <span class="d1">1</span>
		<span class="d2">2</span>
		<span class="d3">3</span>
		<span class="d4">4</span>
		<span class="d5">5</span>
		<p>lorem</p>   <p>lorem</p>
	</body>
</html>